<template>
  <div class="home-top-banner">
    <div class="banner-wrap">
      <div class="left-wrap">
        <div class="title">
          专注一件起订的
          <br />
          柔性供应链
        </div>
      </div>
      <div class="right-wrap bg">
        <img
          class="active"
          src="https://q01.yinge.cc/resource/2023/03/09/a4d232b9-4168-47ca-870e-c52013c620f8.png?imageMogr2/auto-orient/format/webp/thumbnail/!750x750r/interlace/1/ignore-error/1"
          alt=""
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  setup() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
.home-top-banner {
  width: 100%;
  height: 732px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background-image: url('https://q01.yinge.cc/resource/2023/03/09/30f41174-d049-4b59-b222-efa02848b750.jpeg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .banner-wrap {
    display: flex;
  }
  .left-wrap {
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    .title {
      font-size: 70px;
      color: rgb(18, 18, 18);
      font-weight: 800;
      margin-top: 144px;
      white-space: nowrap;
    }
  }
  .right-wrap {
    margin-left: 100px;
    min-width: 813px;
    width: 813px;
    height: 610px;
    background-image: url('https://q01.yinge.cc/resource/2023/03/09/e34774b7-1131-4824-a86c-1e30f55dd979.png');
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    background-position: center center;
    >img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      opacity: 0;
      &.active{
        animation: changeBg 4s infinite;
      }
      @keyframes changeBg {
        0% {
          opacity: 0;
        }
        50%{
          opacity: 1;
        }
        100%{
          opacity: 0;
        }
      }
    }
  }
}
</style>
